<template>
  <div class="goods_detail">
    <el-main style="padding: 0">
      <div class="top">
        <div class="flex top_center width mar0">
          <div class="product_img">
            <el-image :src="currentImg" class="curImg" :preview-src-list="imageList" />
            <p>
              <template v-for="(item, index) in imageList">
                <img :key="index" :class="{ 'selected': currentImg === item }" style="width:4rem;height:4rem" :src="item" alt="缩略图" @click="showImg(item)">
              </template>
            </p>
          </div>
          <div class="info_wrapper">
            <h3>{{ goodsInfo.name }}</h3>
            <h6>{{ goodsInfo.sku_name }}</h6>
            <p class="gray_bg">
              月租金: <span>￥{{ goodsInfo.unit_price }}/月</span>
              总租金: <span>￥{{ totalRent }}</span>
            </p>
            <div>
              <div class="mealDiv">
                <p>
                  <span class="label">套餐：</span>
                  <span class="title">{{ goodsInfo.sku_name }}</span>
                </p>
                <p>
                  <span class="label">租期：</span>
                  <span class="title">{{ goodsInfo.month }}个月</span>
                </p>
                <p>
                  <span class="label">数量：</span>
                  <span class="title">{{ goodsInfo.number }}</span>
                </p>
              </div>
              <p><span class="label">押金：</span>￥{{ totalRent }}</p>
              <p><span class="label">配送方式：</span>{{ '寄出包邮' }}-{{ '归还自付' }}</p>
              <p><span class="label">是否买断：</span>
                {{ goodsInfo.is_buy_out == 0 ? "不可买断" : "可买断" }}
              </p>
              <p><span class="label">买断金额：</span>{{ buyoutRent }}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom width mar0">
        <p class="blue-font text-center detail_label"><span>商品详情</span></p>
        <p class="goodsContent" v-html="goodsInfo.info" />
      </div>
    </el-main>
  </div>
</template>

<script>
import { getGoodsDetails } from './index'
export default {
  data() {
    return {
      baseUrl: '',
      orderNo: '',
      goodsInfo: {},
      imageList: [],
      currentImg: '',
      totalRent: '',
      buyoutRent: ''
    }
  },
  created() {
    this.orderNo = this.$route.query.orderNo
  },
  mounted() {
    this.getDetails()
  },
  methods: {
    showImg(url) {
      this.currentImg = url
    },
    getDetails() {
      getGoodsDetails({ orderNo: this.orderNo }).then(res => {
        // console.log('res',res)
        this.goodsInfo = res
        let urls = []
        if (res.images && res.images.indexOf('.') === -1) {
          urls.push(res.images)
          this.imageList = urls.map(item => this.baseUrl + item)
        } else {
          urls = res.images.split(',')
          this.imageList = urls.map(item => this.baseUrl + item)
        }
        this.currentImg = this.imageList[0]
        const total1 = String(res.unit_price * res.month)
        this.totalRent = total1 > 0 ? total1.substring(0, total1.indexOf('.') + 3) : 0
        const price = String(res.market_price - this.totalRent)
        this.buyoutRent = price > 0 ? price.substring(0, price.indexOf('.') + 3) : 0
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.goods_detail {
  background: #f5f5f5;

  .width {
    width: 1000px;
  }

  .mar0 {
    margin: 0 auto;
  }

  .top {
    background: #fff;
    padding: 30px 0 40px;

    .top_center {
      border: 1px solid #e5e5e5;
      padding: 30px;
    }
  }

  .product_img {
    // width: 21vw;
    margin-right: 30px;
    margin-bottom: 15px;

    .curImg {
      // width:20vw;
      // height: 20vw;
      width: 384px;
      height: 384px;
      border: 1px solid #E6E6E6;
    }

    img {
      border: 1px solid #cdcdcd;
      cursor: pointer;
    }

    &>p {
      margin-top: 10px;

      img {
        &:not(:first-child) {
          margin-left: 10px;
        }

        &.selected {
          border: 2px solid #2892ff;
        }
      }
    }
  }

  .info_wrapper {
    flex: 1;

    h6 {
      color: #999999;
      margin-top: 10px;
    }

    .gray_bg {
      line-height: 50px;
      background: #FFF6ED;
      padding-left: 10px;
      margin: 18px 0 20px;
      font-size: 14px;
      color: #999999;

      &>span {
        font-size: 14px;
        color: #ff4146;
        margin: 0 10px;
        margin-right: 50px;
      }
    }

    &>div {
      padding-bottom: 5px;

      .mealDiv {
        padding-bottom: 15px;
        margin-bottom: 15px;
        border-bottom: 1px solid #E6E6E6;
      }

      p {
        .label {
          display: inline-block;
          text-align: right;
          width: 80px;
          color: #999999;
          font-size: 14px;
          margin-right: 10px;
          line-height: 35px;
        }

        .title {
          font-size: 14px;
          color: #333333;
        }
      }
    }
  }

  .bottom {
    background: #fff;
    margin-top: 40px;

    .detail_label {
      box-shadow: 0px 1px 0px 0px #CDCDCD;

      span {
        font-size: 20px;
        font-weight: bold;
        display: inline-block;
        padding: 10px 0;
        border-bottom: 3px solid #2993ff;
      }
    }

    .goodsContent {
      padding: 25px 60px;

      /deep/ img {
        width: 100%;
      }
    }
  }
}
</style>
